import React from 'react'
import ReactDOM from 'react-dom'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import DocConstant from '../../util';
import {WingBlank  ,Tools, Icon,Popover,Drawer,Toast,ActivityIndicator,PhotoSwipe} from 'weaver-mobile'
import CommentRoute from './CommentRoute';
import AttachRoute from './AttachRoute';
import DocAttribute from './DocAttribute';
import { Route, withRouter } from 'react-router-dom';
import {Share } from 'weaver-mobile-page';
import QueueAnim from 'rc-queue-anim';
import DocLog from './DocLog';
import ShareUser from '../../components/docForm/Share'
import {GetUrlParam,getWpsSign} from '../../util/Utils'
// import loadingImg from '../../img/loading.gif'
const getLabel = Tools.getLabel;
@withRouter
@inject('docStore')
@observer
class Doc extends React.Component {
  componentDidMount() {
    const {match, docStore,path,location} = this.props,
      {params} = match, {id} = params;
    const {search} = location;
    let viewPraise = GetUrlParam(search,"viewPraise");
	let viewReply = GetUrlParam(search,"viewReply");
    let viewMessage = GetUrlParam(search,"viewMessage");
    let chagneTopTitle = GetUrlParam(search,"chagneTopTitle");
    docStore.init(id, path,{chagneTopTitle}).then(() => {
        if(docStore.canRead) {
            docStore.updateBizStateForDoc({id, viewReply, viewPraise, viewMessage});
        }
    });
    docStore.showfooter = true;
    docStore.pagetype = "";
    
    if(viewReply==="1"){
      this.props.history.push(`${path || ''}/doc/${id}/comment`);
    }
    if(viewPraise==="1"){
      this.props.history.push(`${path || ''}/doc/${id}/comment?viewPraise=1`);
    }
    // 增加文档页面的浏览器缩放支持
    let viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', "width=device-width,initial-scale=1,maximum-scale=2,minimum-scale=1,user-scalable=yes");
  }
  componentWillReceiveProps(nextProps) {
    const {docStore} = nextProps;
    const {isShowWater} = docStore;
    setTimeout(function(){
      if(window.waterMark && !isShowWater){
          window.waterMark.destory();
      }
    },1);
    if (nextProps.match && nextProps.match.params.id !== this.props.match.params.id) {
      
      const {match, docStore,path} = nextProps;
      docStore.init(match.params.id, path);
    }
  }
  componentWillUnmount(){
    const {docStore} = this.props;
    if(docStore.canRead){
      docStore.docInfo.docAttrs = {}
      //退出文档详情页时将附件转换链接置空，防止数据乱
      docStore.singleAttachPath = "";
      if (DocConstant.isApp()) {
        window.em.changeTitle({
          title: docStore.prevTitle
        });
      } else {
        window.document.title = docStore.prevTitle;
      }
    }
    //退出时隐藏详情页转换提示
    Toast.hide();
    // 取消浏览器缩放支持
    let viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no");
  }
 componentDidUpdate() {
    const {docStore} = this.props, {imgInited} = docStore;
    if (!imgInited) {
      this.initImg();
    }
  }
  //touch开始
  touchStart = (e) =>{
    const {docStore} = this.props;
    docStore.pageY = e.nativeEvent.changedTouches[0].pageY;
    docStore.pageStartX = e.nativeEvent.changedTouches[0].pageX;
    docStore.pageStartY = e.nativeEvent.changedTouches[0].pageY;
    if(e.nativeEvent.changedTouches.length>1||e.nativeEvent.targetTouches.length>1){
      docStore.touchNum = 2;
    }
    if(docStore.touchNum<2){
      //判断长按操作
      this.timeOutEvent = setTimeout(function() { 
        docStore.isTimeoutPress = true; 
        //执行长按操作
        }, 500);
    }
  }
  setiframeHeight = () =>{
    try{
        let iframeList = document.getElementsByTagName("iframe"),
        domNode = iframeList && iframeList[0].contentWindow.document,
        mainiframe = document.getElementById("mainiframe"), //am-wingblank-iframe,
        wingiframeclass = document.getElementsByClassName("am-wingblank-iframe")[0],
        pagewidth = window.innerWidth,
        pageheight = window.innerHeight,
        domWidth = domNode.body.scrollWidth,
        domHight = domNode.body.scrollHeight,
        iframeBodyclass = domNode.getElementsByClassName("b2");
        let d1class = domNode.getElementsByClassName("d1");
        let d2class = domNode.getElementsByClassName("d2");
        if(d1class){
          for(let i = 0;i<d1class.length;i++){
            d1class[i].style.margin = "0";
            d1class[i].style.padding = "10px";
          }
        }
        if(d2class){
          for(let i = 0;i<d2class.length;i++){
            d2class[i].style.margin = "0";
            d2class[i].style.padding = "10px";
          }
        }
        // iframeClass = document.getElementsByClassName("wea-doc-single-attach")[0];
        for(let i = 0;i<iframeBodyclass.length;i++){
          iframeBodyclass[i].style.margin = "0";
          iframeBodyclass[i].style.padding = "10px";
        }
        if (!domNode) return;
        domHight = domHight<pageheight ? pageheight : domHight;
        domWidth = domWidth<pagewidth ?pagewidth : domWidth;
        mainiframe.style.height=domHight+"px";
        //wingiframeclass.style.width=domWidth+"px";
        // iframeClass.style.paddingLeft = "10px";
    } catch(e){
        // 防止跨域报错
    }
}
  setDocLock = () =>{
        try{
            const {docStore} = this.props;
            let iframeList = document.getElementsByTagName("iframe");
			if(docStore.docisLock){
			    for(let index =0;index < iframeList.length; index++){
                  let domNode = iframeList && iframeList[index].contentWindow.document;
                    if (!domNode) return;
                     if(domNode.body){
                       domNode.body.style.cssText += ';-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;unselectable:on;';
                       domNode.body.onselectstart = function () {return false};
                    }
                  }
				if(document.body){
			      document.body.style.cssText += ';-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;unselectable:on;';
			      document.body.onselectstart = function () {return false};
				}
			}
         } catch(e){
        // 防止跨域报错
         }
  }
  
  initImg = () => {
    try {
      const {docStore} = this.props;
      let domNode = ReactDOM.findDOMNode(this._container);
      if (!domNode) return;
      let iframeList = domNode.getElementsByTagName("iframe");
      /*if (iframeList.length > 0) {
        let doc = iframeList[0].contentWindow.document;
        doc.addEventListener("click", this.openLink);
      }*/
      let container = iframeList.length > 0 ? iframeList[0].contentWindow.document : domNode;
      let imgNodeList = Array.from(container.querySelectorAll("img"));
      let imgUrlList = [];
      let imgList = [];
      imgUrlList = imgNodeList.map((img) => (
        {
          url:img.src,
          w: img.naturalWidth,
          h: img.naturalHeight,
        }
      ));
      imgList = imgUrlList;
      //图片加载loading，先去掉
      // imgNodeList.forEach((img, index) => {
      //   img.src = loadingImg;
      // })
      imgUrlList.forEach((img, index) => {
        let localImg = new Image();
        localImg.onload = (e) =>{
          if(localImg.complete){
            imgNodeList[index].src = img.url;
            imgList[index].url = img.url;
            docStore.updateImg(index,imgList[index]);
          }
        }
        localImg.src = img.url;
      })
      imgNodeList.forEach((img, index) => {
        img.onload = (e) => {
          let {naturalWidth, naturalHeight} = e.target;
          docStore.updateImg(index, {w: naturalWidth, h: naturalHeight})
        }
        img.onclick = (...args) => {
          docStore.openImg(index);
        };
      });
      
      docStore.setImgList(imgList);
    } catch(e) {
      // 防止跨域报错
    }
    setTimeout(()=>{
     this.setDocLock();
      },1000
    );
    const {docStore} = this.props;
    if(docStore.isUsePoi){
      this.setiframeHeight();
    }
  }

  initOpenButton = () => {
    try {
      const {docStore} = this.props;
      let iframeList = document.getElementsByTagName("iframe");
      if (iframeList.length > 0) {
        let doc = iframeList[0].contentWindow.document;
        doc.addEventListener("click", (...args) => {
          docStore.setOpenButtonVisible(true);
        });
      }
    } catch(e) {
      // 防止跨域报错
    }
  }
  /*touchMove = (e)=>{
    const {docStore} = this.props
    if(docStore.touchNum<2){
      //如果滑动了，就清除长按事件
      clearTimeout(this.timeOutEvent);  
      docStore.isTimeoutPress = false; 
    }
     
  }*/
  //touch结束
  touchMove = (e)=>{
    const {docStore} = this.props
    clearTimeout(this.timeOutEvent); 
    //单指操作，才执行隐藏逻辑
    if(docStore.touchNum<2 && !this.touchMoveTimeout){
      this.touchMoveTimeout = window.setTimeout(() => {
        this.touchMoveTimeout = null;
      }, 1)
      let endPageY = e.nativeEvent.changedTouches[0].pageY;
      let endPageX = e.nativeEvent.changedTouches[0].pageX;
      if(docStore.isTimeoutPress){
        //执行长按松手之后操作
        docStore.isTimeoutPress = false; 
      }else{
        //高度差低的时候当做点击事件
        if(Math.abs(endPageY-docStore.pageStartY)<=2 && Math.abs(endPageX-docStore.pageStartX)<=2){
          if(e.target.tagName.toLowerCase()!=="a"){
            docStore.showfooter = !docStore.showfooter;
          }
          
        }else{ //否则当做滑动事件
          if(endPageY<docStore.pageY){//上滑，隐藏头脚
              docStore.showfooter = false;
          }else if (endPageY > docStore.pageY){ //下滑，显示头脚
            docStore.showfooter = true;
          }
        }
        docStore.pageY = endPageY;
      }
    }else{
      docStore.touchNum = 1;
    }
  }
  //屏蔽touch事件
  shildtouch = () =>{
  }
  
  openLink = () => {
    const {docStore} = this.props, {singleAttachPath, isConvertFileEnd} = docStore;
    if (isConvertFileEnd && singleAttachPath) {
      if (window.em) {
        window.em.openLink({
          url: singleAttachPath,
          openType: 2
        });
      } else {
        window.open(singleAttachPath);
      }
    }
  }
 
  doPraise = () =>{
    const {docStore} = this.props
    if(docStore.isPraised){
      docStore.isPraised = false;
      docStore.praise()
    }
  }
  //设置当前选中了菜单中某一项后的操作
  selectMenuElli = (item,index) =>{
    const {path,docStore} = this.props,{id, shareStore, docInfo, mainFileInfo} = docStore
    docStore.setMenuElliVisible(false)
    if(item.key==="attReply"){
      this.props.history.push(`${path || ''}/doc/${id}/comment`)
    }else if(item.key==="docAttribute"){
      this.props.history.push(`${path || ''}/doc/${id}/attribute`)
    }else if(item.key==="share"){
      this.props.history.push(shareStore.path);
    }else if(item.key==="favorite"){
      // this.props.history.push(`${path || ''}/doc/${id}/collect`)
    }else if(item.key==="attach"){
      this.props.history.push(`${path || ''}/doc/${id}/attach/list`)
    }else if(item.key==="docLog"){
      this.props.history.push(`${path || ''}/doc/${id}/log`)
    }else if(item.key === "submit"){
      docStore.dosubmit({'id':docStore.id});
    }else if(item.key === 'editDoc'){
    	this.props.history.push(`/add/39?id=${docStore.id}`);
    }else if(item.key === 'editAcc'){
        let imagefileid = '';
        if(mainFileInfo && mainFileInfo.mainFileid && mainFileInfo.mainFileOnline && docInfo && docInfo.isContentEmpty && docInfo.canOpenSingleAttach){
            imagefileid = mainFileInfo.mainFileid;
        }
        this.props.history.push(`${path || ''}/add/39?id=${docStore.id}&imagefileid=${imagefileid}`);
    }else if(item.key === 'deleteDoc'){
      docStore.deleteDoc({docid:id},this.props);
    }
  }
  clickReadCount = () => {
    const {path,docStore} = this.props,{id} = docStore;
    let docInfo = toJS(docStore.docInfo) || null;
    if(docInfo && docInfo.isshowLog==="1"){
      docStore.chooseLogTab = 1;
      docStore.chooseLogTabIndex = 1;
      this.props.history.push(`${path || ''}/doc/${id}/log`);
    }
    
  }
  shareUnMount = () =>{
    const {docStore} = this.props;
    docStore.pagetype = "";
  }
  
  render() {
    const {docStore, path} = this.props,
      {loading, id, canRead, shareStore,isHaveDoc,mainFileInfo} = docStore;
    
    let docInfo = toJS(docStore.docInfo) || null;
    if(docStore.pagetype==='share'){
      return(
         <ShareUser key="share-page" store={docStore.shareUserStore} unmount={() => this.shareUnMount()}/>
      )
    }
    if (loading) {
      return (
        <div className="wea-doc-whitebg">
          <div className="wea-doc-error">
             <ActivityIndicator size="large"/>
          </div>
        </div>
      );
    }
    if(isHaveDoc!=="1"){
      return (
        <div className="wea-doc-whitebg">
          <div className="wea-doc-error">
            <Icon type="discard" size="lg" style={{width: 60, height: 60}}/>
            <div>{getLabel(500686, "文档不存在!")}</div>
          </div>
        </div>
      );
    }
    if (!canRead) {
      return (
        <div className="wea-doc-whitebg">
          <div className="wea-doc-error">
            <Icon type="wuquanxian" size="lg" style={{width: 100, height: 100}}/>
            <div>{getLabel(382663, "暂无权限")}</div>
          </div>
        </div>
      );
    }
    if (docInfo == null) {
      return (
        <div className="wea-doc-whitebg">
          <div className="wea-doc-error">
            <Icon type="no-data" size="lg"/>
            <div>{getLabel(83553, "暂无数据")}</div>
          </div>
        </div>
      );
    }
    
    // const isSingleAttach = Array.isArray(docInfo.docAttrs) && docInfo.docAttrs.length > 0 && docInfo.canOpenSingleAttach && docInfo.docAttrs[0].readOnLine==="1";
    const isSingleAttach = docInfo && docInfo.canOpenSingleAttach && mainFileInfo.mainFileid && mainFileInfo.mainFileOnline;
    const footerbar = (
      <div className="wea-doc-info-footer"
      >
          <span className="wea-doc-info-footer-reply">
            <div  className="doc-detail-readCount" onClick={()=>this.clickReadCount()}>
              <span>{getLabel(260, '阅读')}</span>
              <span>({docInfo.readCount})</span>
            </div>
            
          </span>
          <span className="wea-doc-info-footer-oper">
            {docInfo.canReply && (docInfo.docstatusnum === '1' || docInfo.docstatusnum === '2' || docInfo.docstatusnum === '5') && [
              <div className="doc-detail-reply"  key="reply" onClick={() => this.props.history.push(`${path || ''}/doc/${id}/comment`)}>
                <Icon  type="reply" size="xs" />
                <span className="ml-sm doc-detail-replynum" key="replyNum">{docInfo.replyCount>=99?getLabel(390464, '99+'):docInfo.replyCount}</span>
              </div>,
              <div className="doc-detail-praise"  key="fabulous" onClick={()=>this.doPraise()}>
                <Icon type="fabulous" className={(docInfo.isPraise ? "doc-praise" : "")}
                    size="xs"/>
                <span className={"ml-sm " + (docInfo.isPraise ? "doc-praise" : "")} key="praiseNum">{docInfo.praiseCount>=99?getLabel(390464, '99+'):docInfo.praiseCount}</span>
              </div>,
            ]}
            {/*{DocConstant.isApp() && <Icon type="forward" className="ml-lg" size="xs"/>}*/}
           
            <div className="doc-detail-attach" key="enclosure" onClick={() => this.props.history.push(`${path || ''}/doc/${id}/attach/list`)}>
              <Icon type="enclosure" size="sm" />
              <span className="ml-sm" key="attachNum">{docInfo.docAttrs.length>=99?getLabel(390464, '99+'):docInfo.docAttrs.length}</span> 
            </div>
            <div className="doc-detail-collect" key="collection" onClick={docStore.collect}>
              <Icon type="collection"  className={(docInfo.isCollute ? 'doc-collect' : "")} size="xs" />
            </div>
          </span>
        </div>
    )
    const headerbar = (
      <div className="doc-detail-header">
        <div className={`doc-title ${(isSingleAttach && false) ? 'doc-title-two-icon' : ''}`} >{docInfo.docTitle}</div>
        <div className="doc-title-img">
          {/*{isSingleAttach &&
            <span>
              <Icon type="pc" size="xs" onClick={this.openLink}/>
            </span>
          }*/}
          <Popover
            mask
            key="docdetail-menu-popover"
            align={{offset:[14,-40]}}
            placement="bottomLeft"
            visible={docStore.MenuElliVisible}
            overlay={[
              (docInfo.canReply && (docInfo.docstatusnum === '1' || docInfo.docstatusnum === '2' || docInfo.docstatusnum === '5')) &&
                <Popover.Item  key="attReply">{getLabel(18540, '回复')}</Popover.Item>,
                <Popover.Item  key="docAttribute">{getLabel(33197, '文档属性')}</Popover.Item>,
                docInfo.isshowLog==="1" && <Popover.Item  key="docLog">{getLabel(21990, '文档日志')}</Popover.Item>,
                //生效、正常、归档的才可以分享
                ( DocConstant.isApp() && (docInfo.docstatusnum === '1' || docInfo.docstatusnum === '2' || docInfo.docstatusnum === '5') && docInfo.isUseEMessager==="1") && <Popover.Item key="share">{getLabel(126091, '分享')}</Popover.Item>,
                 // TODO 收藏现在没有方案
                // <Popover.Item key="favorite">{getLabel(28111, '收藏')}</Popover.Item>,
                <Popover.Item  key="attach">{getLabel(156, '附件')}</Popover.Item>,
                docInfo.canEditDoc && <Popover.Item  key="editDoc">{getLabel(93, '编辑')}</Popover.Item>,
                docInfo.canEditAcc && <Popover.Item  key="editAcc">{getLabel(129740, '编辑附件')}</Popover.Item>,
                docInfo.canDelete && <Popover.Item  key="deleteDoc">{getLabel(91, '删除')}</Popover.Item>,
                //docInfo.docstatusnum <= '0' && <Popover.Item  key="submit">{getLabel(615, '提交')}</Popover.Item>,
            ]}
            onVisibleChange={docStore.setMenuElliVisible}
            onSelect={this.selectMenuElli}
          >
            <span className="doc-title-icon">
              <Icon type="ellipsis" size="xs"/>
            </span>
          </Popover>
        </div>
        <div className="doc-title-subinfo">
          <div className="doc-title-last-modify" style={docInfo.doc_final_edit==='1'?{display:'block'}:{display:'none'}}>
            <span>{getLabel(126385, '最后由')}{docInfo.updateUser}{getLabel(126386, '编辑于')}{docInfo.updateTime}</span>
            {/* <span className="ml-sm">{docInfo.updateUser}</span>
            <span className="ml-sm">{getLabel(126386, '编辑于')}</span>
            <span className="ml-sm1">{docInfo.updateTime}</span> */}
          </div>
        </div>
      </div>
    );
    const {imgList = [],imgInited,imgIndex} = docStore;
    let iframeParam = {};
    iframeParam = docStore.isUsePoi?{scrolling:"no"}:{};
    return (
      <div className="wea-doc-whitebg">
        <AttachRoute path={path}/>
        <DocAttribute path={path}/>
       
        <Route
          key="doc-log"
          path={`${path || ''}/doc/:id/log`}
          render={() => {
            return (
              <div className="wea-docreply-whitebg">
                <QueueAnim>
                  <DocLog path={path}
                                key="doc-log-div"/>
                </QueueAnim>
              </div>
            )
          }}
        />
        <Route
          key="doc-comment"
          path={`${path || ''}/doc/:id/comment`}
          render={() => {
            return (
              <div className="wea-docreply-whitebg">
                <QueueAnim>
                  <CommentRoute path={path}
                                key="doc-comment-div"/>
                </QueueAnim>
              </div>
            )
          }}
        />
        <Route
          key="doc-share"
          path={shareStore.path}
          render={() => {
            return (
              <Share
                store={shareStore}
                shareParams={{
                  url: '/api/doc/mobile/systemDoc/addShare',
                  resourceid: id, // 当前共享数据的id,多个用逗号分隔（流程就是当前流程的id）
                  resourcetype:'doc',
                }}
                msgInfo={{
                  content: docInfo.docTitle, // 分享标题（必填）
                  desc: "", // 分享描述（非必填）
                  sysid: window.localStorage.emobile_ec_id, // EM中添加的集成系统的ID (必填: 按照demo给的传)
                  linkurl: `/spa/document/static4mobile/index.html#/doc/${id}`, // 消息链接地址（必填）
                  linkurl_pc: `/spa/document/index.jsp?id=${id}`, //PC端消息链接地址，如果没有则取linkurl值
                  canforward:1, // 消息是否允许转发 1：是（默认） 0：否
                  callbackurl:`/api/doc/mobile/systemDoc/addShare?resourceid=${id}`, // 消息转发回调地址（非必填）
                  opentype:1, //移动端打开方式 1:app内打开（默认） 2：手机默认浏览器打开
                  opentype_pc:2, //PC端打开方式 1:应用内打开（默认） 2：PC默认浏览器打开
                  sharetype:"doc", // 分享数据类型："doc","workflow","task","pdoc","folder" ,"crm" 分别代表文档，流程，任务，云盘文档，云盘文件，客户名片
                  shareid:id // 分享的数据ID（必填）
                }}
              />
            )
          }}
        />

        <Drawer
            className={docInfo.doc_final_edit==='1'?(docStore.showfooter?"hidden-header-dramer":"hidden-header-dramer hidden-noheader-dramer"):"hidden-header-dramer hidden-noheader-dramer"}
            open={docStore.showfooter}
            sidebar={headerbar}
            position='top'
          >
          {/* 只是Drawer里边不能为空，这个span并没有什么作用 */}
          <span ></span>
        </Drawer>
        
        <div className={docInfo.doc_given_count==='1'?(docStore.showfooter?"wea-doc-info":"wea-doc-info wea-doc-info-nofooter"):"wea-doc-info wea-doc-info-nofooter"}
          //  检测滑动事件
          // style={isSingleAttach?{overflow:'hidden'}:{overflow:'auto'}}
          ref={c => this._container = c}
          //单附件屏蔽touch事件
          onTouchStart={isSingleAttach?this.shildtouch:this.touchStart}
          onTouchMove={isSingleAttach?this.shildtouch:this.touchMove}
          onTouchEnd={isSingleAttach?this.shildtouch:this.touchMove}
        >
          <WingBlank size="lg"  className={docInfo.isContentEmpty && isSingleAttach?"am-wingblank-iframe":"am-wingblank"}>
            <div className={docInfo.isContentEmpty && isSingleAttach?"doc-content-bg doc-content-bg-iframe":(docInfo.isContentEmpty ? "doc-content-bg doc-content-bg-nodata" : "doc-content-bg")}>
              <div className={docInfo && docInfo.isContentEmpty && isSingleAttach?"doc-content-iframe":"doc-content"} onClick={(e)=>{
                if(e.target.tagName.toLowerCase()==="img"){
                  imgInited && PhotoSwipe.showImage(imgList,imgIndex)
                }
                }}>
                {!docInfo.isContentEmpty ?
                  <div className="doc-detail-content"
                  >
                    <div dangerouslySetInnerHTML={{__html: docInfo.doccontent}} className="doc-detail-content-html"></div>
                  </div>
                  :
                    (isSingleAttach)?
                      !(mainFileInfo && mainFileInfo.ficon.iconType === 'pdf' && docInfo.doc_pdf_download ==='1')
                      ?<div className="wea-doc-single-attach">
                        {docStore.isConvertFileEnd &&
                          [
                            <iframe
                              key="iframe"
                              id="mainiframe"
                              src={docStore.singleAttachPath}
                              title={getLabel(388748, "查看文件")}
                              frameBorder="0"
                              // scrolling = "no"
                              iframeParam
                              style={{height: '99%', width: '100%'}}
                              onLoad={()=>{
                              	this.initImg();
                              	getWpsSign("mainiframe");
                              }}
                            ></iframe>,
                            <Popover
                              mask={true}
                              key="popover"
                              align={{offset:[14,-40]}}
                              placement="bottomLeft"
                              visible={docStore.openButtonVisible}
                              overlay={[
                                <Popover.Item key="view">{getLabel(391244, '全屏查看')}</Popover.Item>,
                              ]}
                              onVisibleChange={docStore.setOpenButtonVisible}
                              onSelect={this.openLink}
                            >
                              <span style={{display: 'none'}}/>
                            </Popover>
                          ]
                        }
                      </div>
                      :<div className="wea-doc-error">
                        <Icon type="no-data" size="lg"/>
                        <div>{Array.isArray(docInfo.docAttrs) && docInfo.docAttrs.length > 0 ?
                                getLabel(388747, "请查看右下角附件") :
                                getLabel(83553, "暂无数据")}</div>
                      </div>
                    :<div className="wea-doc-error">
                        <Icon type="no-data" size="lg"/>
                        <div>{Array.isArray(docInfo.docAttrs) && docInfo.docAttrs.length > 0 ?
                                getLabel(388747, "请查看右下角附件") :
                                getLabel(83553, "暂无数据")}</div>
                      </div>
                }
              </div>
            </div>
          </WingBlank>
        </div>
        <Drawer
          className={docInfo.doc_given_count==='1'?(docStore.showfooter?"hidden-footer-dramer":"hidden-footer-dramer hidden-nofooter-dramer"):"hidden-footer-dramer hidden-nofooter-dramer"}
          open={docStore.showfooter}
          sidebar={footerbar}
          position='bottom'
        >
          {/* 只是Drawer里边不能为空，这个span并没有什么作用 */}
          <span ></span>
        </Drawer>
        {/* {imgInited &&
          PhotoSwipe.showImage(imgList,imgIndex)
        } */}
      </div>
    )
  }
  
}

export default Doc;
